<template>
  <div id="app">
    <s-button icon="delete" iconPos="left">图标在左</s-button>
    <s-button icon="delete" iconPos="right">图标在右</s-button>
    <s-button disabled @click="showEvent">按钮</s-button>

    <br>
    <s-button disabled type="primary">按钮</s-button>
    <s-button type="success">按钮</s-button>
    <s-button type="danger">按钮</s-button>
    <s-button type="warning">按钮</s-button>
    <s-button type="info">按钮</s-button>

    <br>
    <s-button plain>按钮</s-button>
    <s-button plain disabled>按钮</s-button>
    <s-button plain disabled type="primary">按钮</s-button>
    <s-button plain type="success">按钮</s-button>
    <s-button plain type="danger">按钮</s-button>
    <s-button plain type="warning">按钮</s-button>
    <s-button plain type="info">按钮</s-button>

    <br>
    <s-button round>按钮</s-button>
    <s-button disabled round type="primary">按钮</s-button>
    <s-button round type="success">按钮</s-button>
    <s-button round type="danger">按钮</s-button>
    <s-button round type="warning" icon="delete">按钮</s-button>
    <s-button round type="info">按钮</s-button>

    <br>
    <s-button circle style="width: 40px" type="primary" icon="delete"></s-button>
    <s-button circle plain style="width: 40px" type="success" icon="arrowDown"></s-button>
    <s-button circle plain style="width: 40px" type="danger" icon="arrowUpFill"></s-button>
    <s-button circle plain style="width: 40px" type="warning" icon="success"></s-button>
    <s-button circle plain style="width: 40px" type="info" icon="close"></s-button>

    <br>
    <s-button type="primary" @click="visible = true" style="width: 120px">显示对话框</s-button>
    <s-dialog title="这是提示" :visible.sync="visible">这是一段提示信息
      <template v-slot:footer>
        <s-button @click="visible = false" type="warning">取消</s-button>
        <s-button @click="visible = false" type="primary">确定</s-button>
      </template>
    </s-dialog>

    <br>
    <s-input placeholder="请输入用户名" type="text" disabled></s-input>
    <s-input placeholder="请输入用户名" type="text" v-model="username" clearable></s-input>

    <!-- v-model 本质不过是语法糖，是 :value="username" 与 @input="username = $event.target.value" 的结合体 -->
    <!-- :value="username" 的作用是单向绑定你在 data 里定义的值（假设是 username），当输入框里的值改变后并不会让 username 同步更新 -->
    <!-- 需要使用 @input="username = $event.target.value" 事件去同步输入框的值到 username -->
    <!-- 但 s-input 里使用了 v-model，这样，s-input 里可以免去 :value="username"，@input="input"，以及在 methods 里添加 input 方法再改 username 的值 -->
    <s-input placeholder="请输入密码" type="password" v-model="password" clearable showPassword></s-input>
    <s-input placeholder="请输入密码" type="password" v-model="password"></s-input>

    <br>
    <s-switch disabled></s-switch>
    <s-switch activeColor="#67c23a" disabled></s-switch>
    <s-switch v-model="active" activeColor="#67c23a"></s-switch>
    <s-switch v-model="active" activeColor="#67c" inactiveColor="#909399"></s-switch>
    <s-switch v-model="active" @click="showSomeThing"></s-switch>
    <s-switch activeColor="#67c" size="middle" disabled></s-switch>
    <s-switch v-model="active" activeColor="#67c" size="middle"></s-switch>
    <s-switch v-model="active" activeColor="#67c" size="large"></s-switch>

    <br>
    <s-radio v-model="gender" label="1">男</s-radio>
    <s-radio v-model="gender" label="0">女</s-radio>

    <br>
    <s-radio-group v-model="gender">
      <s-radio label="1">男</s-radio>
      <s-radio label="0">女</s-radio>
    </s-radio-group>

    <br>
    <s-checkbox v-model="checked" label="vue" ></s-checkbox>
    <s-checkbox v-model="checked" label="react" ></s-checkbox>
    <s-checkbox v-model="checked" label="angular" ></s-checkbox>
    <span>{{checked}}</span>

    <br>
    <s-checkbox-group v-model="groupChecked">
      <s-checkbox label="vue"></s-checkbox>
      <s-checkbox label="react"></s-checkbox>
      <s-checkbox label="angular"></s-checkbox>
    </s-checkbox-group>
    <span>{{groupChecked}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      visible: false,
      username: '',
      password: '',
      active: false,
      gender: '',
      checked: false,
      groupChecked: []
    }
  },
  methods: {
    input (e) {
      this.username = e
    },
    showSomeThing () {
      console.log(this.active)
    },
    showEvent () {
      console.log('aaa')
    }
    // change (e) {
    //   if (typeof e === 'string') {
    //     this.checked.push(e)
    //   } else if (typeof e === 'object') {
    //     this.checked = this.checked.filter(item => item !== e.delete)
    //   }
    // }
    // groupChange (e) {
    //   if (typeof e === 'string') {
    //     this.groupChecked.push(e)
    //   } else if (typeof e === 'object') {
    //     this.groupChecked = this.groupChecked.filter(item => item !== e.delete)
    //   }
    // }
  }
}
</script>

<style lang="scss">
</style>
